<template>
  <div>
    <div>----------以下是代办清单----------</div>
    <h3>{{msgFromChild}}</h3>
    <input v-model="text" />
    <button @click="clearInput">清空</button>
    <button @click="$emit('addList',text);clearInput()">提交</button>
    <button @click="$emit('removeAll')">重置清单</button>
  </div>
  </template>

  <script>
  import { ref,onMounted } from "vue";
  import bus from "vue3-eventbus";
  export default {
      props:{
        title:String
      },
      setup(){
        const msgFromChild= ref("");
        const text = ref("")
        const clearInput = () =>{
          text.value = "";
        }
        onMounted(()=>{
          bus.on("getMsg",msg =>{
            // console.log("触发getMsg")
            msgFromChild.value = msg;
          });
        });
        return{
          msgFromChild,
          text,
          clearInput
        };
      }
  };
  </script>